import GoodsSelectModal from '@/pages/OrderModule/common/bizcomponents/GoodsSelectModal';
import {CloseCircleFilled, DoubleLeftOutlined} from '@ant-design/icons';
import { Collapse, Input, InputNumber, Select } from 'antd';
import IconFont from '@/components/IconFont';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import { SelectBatchInput } from '../SelectBatchInput';
import { goodsFilterItem } from '@/pages/OrderModule/orderList/components/Filter/constant.js';
import DynamicStoreSelectKX from '@/components/DynamicStoreSelectKX';

const { Panel } = Collapse;

/**
 * @desc: 筛选框：商品组件
 */
export const Goods = ({ value = {}, onChange, onPressEnter, stageParams }) => {
  const { checkingMap } = useFilterFieldsConfig();
  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };

  const goodsOptions = [
    { label: '商品名称', value: 'goodsName' },
    { label: '颜色规格', value: 'goodsSpec' },
  ];
  const goodsOptionsSku = [
    { label: '模糊', value: 'skuCode' },
    { label: '精准', value: 'skuCodeAccurate' },
];
  const goodsOptionsSpu = [
    { label: '模糊', value: 'spuCode' },
    { label: '精准', value: 'spuCodeAccurate' },
];

  const supplyStoreModalProps = {
    name: 'storeIdArr',
    value: value.storeIdArr || [],
    wrapperStyles:{
      marginBottom: '12px'
    },
    handleAllSelect(storeIdArr, list){
      console.log(storeIdArr, list, stageParams);
      // onChange({ ...value, storeIdArr })
      stageParams.current.storeIdArr = list;
      triggerChange({ ...value, storeIdArr });
    }
  }

  return (
    <>
      {Object.values(goodsFilterItem).every(item => checkingMap[item] === false) ?
        <div style={{ marginBottom: -6 }} /> :
        <Collapse
          bordered={false}
          defaultActiveKey={['goods']}
          expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
          expandIconPosition="end"
          className={Style['filter-item-collapse']}
        >
          <Panel header="商品" key="goods" className={Style['filter-item-collapse-panel']}>
            {/** 商品搜索 */}
            {checkingMap.sysSkuCodeArr && (
              <FieldWrapper>
                <GoodsSelectModal
                  submitCallback={(values) => {
                    triggerChange({ sysSkuCodeArr: values.map((item) => item.skuCode) });
                  }}
                  // setSelectedRows={(dataSource, rowKey) => {
                  //   console.log('getSelectedRows', dataSource, rowKey);
                  // }}
                  getInputNumberValues={(val) => { }}
                >
                  <Input value={value.sysSkuCodeArr} placeholder="商品搜索" allowClear={{clearIcon: <CloseCircleFilled onClick={e => {
                      e.stopPropagation();
                      triggerChange({sysSkuCodeArr:[]})
                    }}
                    />}} />
                </GoodsSelectModal>
              </FieldWrapper>
            )}
            {/** 商品名称 */}
            {checkingMap.goodsName && (
              <SelectBatchInput
                value={value}
                options={goodsOptions}
                defaultSelectValue="goodsName"
                placeholder="请输入"
                allowclear="true"
                isBatchInput={false}
                onChange={(v) => {
                  triggerChange(v);
                }}
                onPressEnter={onPressEnter}
              ></SelectBatchInput>
            )}
            {/** 商品编码 */}
            {checkingMap.skuCode && (
              <SelectBatchInput
                value={value}
                options={goodsOptionsSku}
                defaultSelectValue="skuCode"
                placeholder="请输入商品编码"
                allowclear="true"
                isBatchInput={false}
                onChange={(v) => {
                  triggerChange(v);
                }}
                onPressEnter={onPressEnter}
              ></SelectBatchInput>
            )}
            {/** 款式编码 */}
            {checkingMap.spuCode && (
              <SelectBatchInput
                value={value}
                options={goodsOptionsSpu}
                defaultSelectValue="spuCode"
                placeholder="请输入款式编码"
                allowclear="true"
                isBatchInput={false}
                onChange={(v) => {
                  console.log(v,111)
                  triggerChange(v);
                }}
                onPressEnter={onPressEnter}
              ></SelectBatchInput>
            )}
            {/** 供应商名称 */}
            {checkingMap.storeIdArr && (
                <DynamicStoreSelectKX {...supplyStoreModalProps} />

              // <FieldWrapper>
              //   <Input
              //     allowClear
              //     value={value.storeName}
              //     placeholder="请输入供应商名称"
              //     allowclear="true"
              //     onChange={(e) => {
              //       triggerChange({ storeName: e.target.value });
              //     }}
              //   />
              // </FieldWrapper>
            )}
             {/** 档口号 */}
             {checkingMap.storeCode && (
              <FieldWrapper>
                <Input
                  allowClear
                  value={value.storeCode}
                  placeholder="请输入档口号"
                  allowclear="true"
                  onChange={(e) => {
                    triggerChange({ storeCode: e.target.value });
                  }}
                  onPressEnter={onPressEnter}
                />
              </FieldWrapper>
            )}
            {/** 匹配状态 */}
            {checkingMap.isMatch && (
              <FieldWrapper>
                <Select
                  value={value.isMatch}
                  onChange={(v) => triggerChange({ isMatch: v })}
                  placeholder="选择匹配状态"
                  allowClear
                  options={[
                    {
                      value: 0,
                      label: '未匹配',
                    },
                    {
                      value: 1,
                      label: '已匹配',
                    },
                  ]}
                  clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
                />
              </FieldWrapper>
            )}
            {/** 备货状态 */}
            {checkingMap.takeState && (
              <FieldWrapper>
                <Select
                  value={value.takeState}
                  onChange={(v) => triggerChange({ takeState: v })}
                  placeholder="选择备货状态"
                  allowClear
                  options={[
                    {
                      value: 0,
                      label: '未备货',
                    },
                    {
                      value: 1,
                      label: '已备货',
                    },
                    {
                      value: 2,
                      label: '部分备货',
                    },
                  ]}
                  clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
                />
              </FieldWrapper>
            )}

            {/** 商品唯一码 */}
            {checkingMap.uniqueCodeArr && (
              <SelectBatchInput
                value={value}
                defaultSelectValue="uniqueCodeArr"
                placeholder="商品唯一码，多个逗号隔开"
                onChange={(v) => {
                  triggerChange(v);
                }}
                onPressEnter={onPressEnter}
              ></SelectBatchInput>
            )}

            {/** 货品数量 */}
            {checkingMap.totalGoodsNum && (
              <FieldWrapper label="货品数量">
                <div className="" style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <InputNumber
                    value={value.totalGoodsNumMin}
                    width={36}
                    controls={false}
                    min={0}
                    allowclear="true"
                    placeholder="请输入"
                    onChange={(v) => {
                      triggerChange({ totalGoodsNumMin: v });
                    }}
                    onPressEnter={onPressEnter}
                  />
                  <span className="input-bettwen-line">-</span>
                  <InputNumber value={value.totalGoodsNumMax} width={36} allowclear="true" controls={false} min={0} placeholder="请输入" onChange={(v) => triggerChange({ totalGoodsNumMax: v })} onPressEnter={onPressEnter}/>
                </div>
              </FieldWrapper>
            )}

            {/** 货品种类 */}
            {checkingMap.skuTotal && (
              <FieldWrapper label="货品种类">
                <div className="" style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <InputNumber allowclear="true" value={value.skuTotalMin} width={36} controls={false} min={0} placeholder="请输入" onChange={(v) => triggerChange({ skuTotalMin: v })} onPressEnter={onPressEnter}/>
                  <span className="input-bettwen-line">-</span>
                  <InputNumber allowclear="true" value={value.skuTotalMax} width={36} controls={false} min={0} placeholder="请输入" onChange={(v) => triggerChange({ skuTotalMax: v })} onPressEnter={onPressEnter}/>
                </div>
              </FieldWrapper>
            )}

            {/** 是否有组合商品 */}
            {checkingMap.isSysComposeGoods && (
              <FieldWrapper>
                <Select
                  value={value.isSysComposeGoods}
                  onChange={(v) => triggerChange({ isSysComposeGoods: v })}
                  placeholder="是否有组合商品"
                  allowClear
                  options={[
                    {
                      value: 1,
                      label: '是',
                    },
                    {
                      value: 0,
                      label: '否',
                    },
                  ]}
                  clearIcon={<IconFont type="iconguanbi2fill" style={{ fontSize: '14px' }} />}
                />
              </FieldWrapper>
            )}

            {/** 商品状态 */}
            {checkingMap.goodsSate && (
              <FieldWrapper>
                <Select
                  value={value.goodsSate}
                  onChange={(v) => triggerChange({ goodsSate: v })}
                  placeholder="请选择商品状态"
                  allowClear
                  options={[
                    {
                      value: 1,
                      label: '待退商品',
                    },
                    {
                      value: 2,
                      label: '已退商品',
                    },
                    {
                      value: 3,
                      label: '平台已发货',
                    },
                  ]}
                  clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
                />
              </FieldWrapper>
            )}

            {/** 快销码 */}
            {/* {checkingMap.isSaleCode && (
              <FieldWrapper>
                <Select
                  value={value.isSaleCode}
                  onChange={(v) => triggerChange({ isSaleCode: v })}
                  placeholder="是否有快销码"
                  allowClear
                  options={[
                    {
                      value: 1,
                      label: '是',
                    },
                    {
                      value: 0,
                      label: '否',
                    },
                  ]}
                  clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
                />
              </FieldWrapper>
            )} */}
          </Panel>
        </Collapse>}
    </>
  );
};

export default Goods;
